<template>
  <div>
    <el-dialog title="申请提现" :visible.sync="showDialog_" custom-class='dialog_right MkApplyCash dialogScroll_add' top="0%" @close='closeDialog("addApplyCash")' @open='openDialog'>
      <div class="head">
        <div class="company">{{applyCash.customerName}}<span class="number">{{applyCash.bankCard}}</span></div>
        <div class="address">{{applyCash.address}}</div>
      </div>
      <div class="details">
        <div class="item"><span class="title">交易银行</span>{{applyCash.bank}}</div>
        <div class="item"><span class="title">开户支行</span>{{applyCash.bankBranch}}</div>
        <div class="item"><span class="title">提现金额</span>{{applyCash.amountOfCash}}</div>
        <div class="item"><span class="title">交易分佣</span>{{applyCash.commission}}</div>
        <div class="item"><span class="title">实际打款</span>{{applyCash.realMoney}}</div>
      </div>
    <div slot="footer" class="dialog-footer footerStyle" v-if="applyCash.amountOfCash!=0">
        <el-button  type="primary" class="btn-primary" element-loading-text="提交中" @click='submitForm' v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
        <el-button type="primary" class='btn-cancel'   @click="showDialog_= false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import applyCashServer from './../../../services/charge'
  export default {
    name: 'MkApplayCash',
    components: {
    },
    props: ['showDialog'],
    methods: {
      closeDialog(formName) {
        this.$emit('closeDialog',this.isRefresh);
      },
      openDialog() {
        applyCashServer.applyCashCompute(data=>{
          this.applyCash=data.data;
        })
      },
      submitForm() {
        this.fullscreenLoading=true;
        applyCashServer.applyCash((data)=>{
          this.$message({
            type:'success',
            message: '申请成功'
          });
          this.isRefresh='yes';
          this.showDialog_=false;
          this.fullscreenLoading=false;
        })
      }
    },
    data () {
      return {
        dialogVisible: false,
        showDialog_: this.showDialog,
        fullscreenLoading: false,
        isRefresh: 'no',
        applyCash: ''
      }
    },
    watch: {
      showDialog: function(value) {
        this.showDialog_=value;
      },
    }
  }
</script>
<style lang='less'>
  @import '../../../assets/style/main.less';
  .MkApplyCash{
    .head{
      font-size: 17px;
      color: @menuBackColor1;
      .number{
        font-size: 13px;
        color: @fontColorThree;
        display: inline-block;
        margin-left: 15px;
      }
      .address{
        font-size: 16px;
        color: @fontColorTwo;
        margin-top: 7px;
      }
    }
    .details{
      margin-top: 17px;
      padding: 20px;
      /*height: 300px;*/
      background: #f9fafa;
      color: @fontColorTwo;
      .item{
        font-size: 14px;
        line-height: 30px;
        .title{
          display: inline-block;
          color: @fontColorThree;
          width: 90px;
        }
      }
    }
  }
</style>
